<template>
  <div class="homeD-container">
    <van-nav-bar
    title="放映厅"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <!-- <div id="date_time_picker">
    <van-field v-model="timeValue" placeholder="选择的日期结果" readonly />
      <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
    <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
    </van-popup>
  </div> -->
  <van-cell-group>
  <van-cell :title="movieDetail.movie_name" :value="'价格:'+movieDetail.movie_price" :label="'开始时间:'+movieDetail.movie_time" />
  </van-cell-group>
    <div class="screen">屏幕</div>
  <div class="square">
    <div class="square-inner grid">
      <div v-for="(item, index ) in divs" :key="index" @click="chose(index)" ref="cdiv"></div>
    </div>
  </div>
  <van-submit-bar :price="myprice" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import request from '@/utils/request.js'
export default {
  components: {
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  props: ['movieDetail'],
  data() {
    return {
      divs: new Array(70).fill(0),
      msg: '',
      myprice: 0,
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      timeValue: this.timeFormat(new Date()),
      seatArr: [],
      mySeat: '',
      mySeatArr: [],
      arr: []
    }
  },
  methods: {
    // 更新座位的
    async siteupdate() {
      const { data: res } = await request.get('/movie/siteupdate', {
        params: {
          // movie_name,seat,price,ordertime,username
          movie_name: this.movieDetail.movie_name,
          seat: this.mySeat,
          username: localStorage.getItem('username')
        }
      })
      // this.getSeat()
      console.log(res)
    },
    // 这个就是添加order列表的
    async addOrderList() {
      const { data: res } = await request.get('/my/add', {
        params: {
          // movie_name,seat,price,ordertime,username
          movie_name: this.movieDetail.movie_name,
          seat: this.mySeat,
          price: this.myprice / 100,
          ordertime: this.movieDetail.movie_time,
          username: localStorage.getItem('username'),
          srcimg: this.movieDetail.move_pic
        }
      })
      // 更新座位的
      this.siteupdate()
      this.getSeat()
      // this.getSeat()
      console.log(res)
    },
    // 先执行获取座位信息，然后展示橙色不能显示的座位
    async getSeat() {
      const { data: res } = await request.get('/movie/site', {
        params: {
          // movie_name,seat,price,ordertime,username
          movie: this.movieDetail.movie_name
        }
      })
      if (res.status === 0) {
        this.seatArr = res.data
        console.log(res.data)
        for (let i = 0; i < this.seatArr.length; i++) {
          if (this.seatArr[i].is_delete === '0') {
            this.arr = this.seatArr[i].site.split(',')
            this.arr.forEach(item => {
              const a = item.indexOf('排')
              const b = item.indexOf('座')
              const a1 = item.slice(0, a)
              const b1 = item.slice(a + 1, b)
              // eslint-disable-next-line no-unused-vars
              const c = Number((a1 - 1) * 10 + (b1 - 1))
              this.$refs.cdiv[c].style.background = ' orange '
            })
          }
        }
      }
    },
    // 提交订单
    onSubmit() {
      this.addOrderList()
      Dialog.alert({
        message: '提交订单成功'
      }).then(() => {
        // on close
        this.$emit('onClickLeft', '1')
      })
    },
    onClickLeft() {
      this.$emit('onClickLeft', '1')
    },
    // 下面是没用的
    showPopFn() {
      this.show = true
    },
    showPopup() {
      this.show = true
    },
    changeFn() { // 值变化是触发
      this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    confirmFn() { // 确定按钮
      this.timeValue = this.timeFormat(this.currentDate)
      this.show = false
    },
    cancelFn() {
      this.show = true
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      return year + '年' + month + '月' + day + '日'
    },
    // 上面是没用的
    // 选择座位的一些列代码
    chose(id) {
      console.log(this.$refs.cdiv[id].style.background)
      if (this.$refs.cdiv[id].style.background === 'orange') {
      } else if (this.$refs.cdiv[id].style.background !== 'red') {
        this.$refs.cdiv[id].style.background = ' red '
        this.myprice += Number(this.movieDetail.movie_price + '00')
        for (let i = 1; i <= 7; i++) {
          for (let j = 1; j <= 10; j++) {
            // eslint-disable-next-line no-unused-expressions
            const d = (i - 1) * 10 + (j - 1)
            if (d === id) {
              const c = i + '排' + j + '座'
              // 数组add进去这个【1排1座，2排2座]
              this.mySeatArr.push(c)
              // 把这个数组变str类型加逗号
              this.mySeat = this.mySeatArr.join(',')
              console.log(this.mySeat)
            }
          }
        }
      } else {
        this.$refs.cdiv[id].style.background = ' skyblue '
        if (this.myprice > 0) {
          this.myprice = this.myprice - Number(this.movieDetail.movie_price + '00')
          // console.log('加了')
        }
      }
    }
  },
  // 挂载，就是dom生成之后该干嘛dom就是页面的html元素和css，他在create（）只是属初始化之后
  mounted() {
    this.getSeat()
    this.timeFormat(new Date())
  }
}
</script>

<style lang="less" scoped>
// .homeD-container {
//   padding-top: 46px;
//   padding-bottom: 50px;
// }
/deep/ .van-nav-bar__text{
  color:#fff
}
.grid{
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 相当于 1fr 1fr 1fr */
  grid-template-rows: repeat(10, 1fr); /* fr单位可以将容器分为几等份 */
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  grid-auto-flow: row;
}
.grid>div{
  height: 50px;
  color: #fff;
  text-align: center;
  background: skyblue;
}
.square{
  position: relative;
  height: 380px;
}
.square-inner{
  padding: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
}
.screen {
  background: gray !important;
  margin: 0 auto;
   position: relative;
   width: 50%;
   text-align: center;
   height: 40px;
   line-height: 40px;
}
</style>
